$(function(){
    let bigpic = $("#big-pic");
    let smallpics= $(".small-pic").find($("li"));

        for(let i=0;i<smallpics.length;i++){
            smallpics[i].onmouseover = () =>{
                bigpic.attr("src",smallpics[i].children[0].children[0].src);
            }
            
           }


    let goodData = JSON.parse(localStorage.getItem("good-data"));
    let id = location.search.split("=")[1];
    // console.log(id);
    let good = goodData.find(res=>id==res.pid);
    console.log(good);

    let name = document.querySelector(".page-title");
    let pic = document.querySelector(".product-pics");
    let price = document.querySelector(".price__reference");
    let list = document.querySelector(".price_commerce_buttons");
    let str1 = "";
    let str2 = "";
    let str3 = "";
    let str4 = "";
    str1 +=`
    <h1 class="product-model__name">${good.pname}</h1>
    <h2 class="product-model__alias">别名：iPhone 13Pro,iPhone13Pro,iPhone13 Pro</h2><div class="product-model__subtitle">A15仿生芯片，超视网膜XDR显示屏，Pro级摄像头系统，ProMotion自适应刷新率技术</div>
    `
    str2 +=`
    <div class="big-pic">
          <a href=""><img id='big-pic' src="${good.pimg}" alt=""></a>
        </div>
        <div class="small-pic">
          <ul class="tab-bd clearfix" id="threeSmallPic">
            <li class=""><a href=""><img src="${good.pimg}" alt=""></a></li>
            <li class=""><a href=""><img src="${good.pimg}" alt=""></a></li>
            <li class=""><a href=""><img src="${good.pimg}" alt=""></a></li>
          </ul>
          <ul class=" clearfix" >
            <li class=""><a href=""><img src="${good.pimg}" alt=""></a></li>
            <li class=""><a href=""><img src="${good.pimg}" alt=""></a></li>
            <li class=""><a href=""><img src="${good.pimg}" alt=""></a></li>
          </ul>
        </div>
    `
    str3 +=`
    <strong>参考报价：</strong><div class="price price-normal">
    <span><b class="price-sign">￥</b><b class="price-type">${good.pprice}</b></span></div>
    `
    str4 +=`
    <button class='minus'>-</button>
        <input type="text" class='num' value='1'></input>
        <button class='plus'>+</button>
    <a class="btn" data-id="${good.pid}" href="cart.html" target="_blank">加入购物车</a>
    `
    name.innerHTML = str1;
    pic.innerHTML = str2;
    price.innerHTML = str3;
    list.innerHTML = str4;

    let pid = location.search.split("=")[1];
    // console.log(pid)
    let cart =new Cart();
        let oBtn = document.querySelector(".btn");
        let oNum = document.querySelector(".num");
        oBtn.onclick=()=>{          
            cart.saveData(pid,parseInt(oNum.value));
            location.href="cart.html";
        }
        let minus = document.querySelector(".minus");
        let plus = document.querySelector(".plus");
        console.log(minus)
        minus.onclick=()=>{
            oNum.value--;
            if(oNum.value<1){
                oNum.value=1;
            }
        }
        plus.onclick=()=>{
            oNum.value++;
        }
})